export default {
  name: 'EditOrView',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    setting: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'view'
    },
    editableColumn: {
      type: Array,
      default: () => []
    },
    diseditableColumn: {
      type: Array,
      default: () => []
    },
    hiddenColumn: {
      type: Array,
      default: () => []
    },
    showBtn: {
      type: Boolean,
      default: true
    },
    showSelection: {
      type: Boolean,
      default: true
    },
    // 新增时的回调处理
    addHook: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      selectedRows: []
    }
  },
  render(h) {
    const vnode = []
    if (this.type === 'edit' && this.showBtn) {
      vnode.push(this.createBtn(h))
    }
    vnode.push(this.createTable(h))
    return h('div', vnode)
  },
  computed: {
    tableConfig() {
      const s = this.setting.filter(e => !this.hiddenColumn.includes(e.prop))
      const setting = s.map(e => {
        const _e = { ...e }
        if (this.type === 'edit' || this.editableColumn.includes(e.prop)) {
          _e.render = e.editRender || _e.render
        }
        if (this.diseditableColumn.includes((e.prop))) {
          delete _e.render
        }
        delete _e.editRender
        return _e
      })
      return {
        hideFuncBar: true,
        setting
      }
    }
  },
  watch: {
    tableData: {
      handler(v) {
        this._refreshTableHeight()
      },
      deep: true
    }
  },
  created() {
    this._refreshTableHeight = (() => {
      let id = null
      return () => {
        if (id) {
          clearTimeout(id)
          id = null
        }
        id = setTimeout(() => {
          this.refreshTableHeight()
          id = null
        }, 200)
      }
    })()
  },
  mounted() {
    this._refreshTableHeight()
  },
  methods: {
    createTable(h) {
      return h('table-box', {
        class: 'table-height-auto',
        props: {
          tableConfig: this.tableConfig,
          data: this.tableData,
          showIndex: true,
          showSelection: this.showSelection && this.type === 'edit',
          tableRowKey: row => {
            if (!row._uid) {
              row._uid = URL.createObjectURL(new Blob([null])).split('/').pop()
            }
            return row._uid
          }
        },
        on: {
          'selection-change': this.selectionChange
        },
        ref: 'tableBox'
      })
    },
    createBtn(h) {
      return h('div', {
        style: {
          display: 'flex',
          justifyContent: 'flex-start',
          alignItems: 'center',
          padding: '5px 0'
        }
      }, [
        h('c-button', {
          attrs: {
            type: 'primary'
          },
          on: {
            click: this.addRow
          }
        }, '增行'),
        h('c-button', {
          attrs: {
            type: 'danger'
          },
          on: {
            click: this.removeRow
          }
        }, '删行')
      ])
    },
    addRow() {
      let row = {}
      this.setting.forEach(e => {
        row[e.prop] = ''
      })
      if (this.addHook instanceof Function) {
        row = this.addHook(row)
      }
      this.tableData.unshift(row)
      this._refreshTableHeight()
    },
    removeRow(i) {
      if (!this.singleJudge(this.selectedRows, '删除')) {
        return
      }
      this.selectedRows.forEach(e => {
        const i = this.tableData.indexOf(e)
        if (i >= 0) {
          this.tableData.splice(i, 1)
        }
      })
      this._refreshTableHeight()
    },
    selectionChange(rows) {
      this.selectedRows = rows
    },
    refreshTableHeight() {
      this.$nextTick(() => {
        this.$refs.tableBox && this.$refs.tableBox.refreshTableHeight()
      })
    }
  }
}
